<!--内置表盘管理 BuiltInDial-->
<template>
  <div class='page_format'>
      <div class="my_Select">
        <el-form :inline="true" class="search-form" style="display: flex; align-items: center; flex-wrap: wrap;">
          <!-- 操作按钮区域 -->
          <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <el-button
              class="bt-color-tjd"
              type="primary"
              v-if="is_show_button('built_in_save')"
              size="small"
              style="margin-right: 10px;"
              @click="saveImportDataForm">导入表盘</el-button>
            <el-button v-if="is_show_button('built_in_save')" class="bt-color-tjd" type="primary" size="small" style="margin-right: 10px;"
                       @click="changeStatus(1)" >下架</el-button>
            <el-button v-if="is_show_button('built_in_save')" class="bt-color-tjd" type="primary" size="small"  style="margin-right: 10px;"
                       @click="changeStatus(2)" >通过</el-button>
            <el-select v-model="dialSize" placeholder="含缩略图表盘大小" style="width: 155px; margin-right:8px"
                       size="small" clearable
                       @change="handleQuery">
              <el-option
                v-for="(item, index) in dialSizeData"
                :key="index"
                :label="`${item.label}`"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select v-model="resSize" placeholder="不含缩略图表盘大小" style="width: 165px; margin-right:8px"
                       size="small" clearable
                       @change="handleQuery">
              <el-option
                v-for="(item, index) in dialSizeData"
                :key="index"
                :label="`${item.label}`"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>

          <!-- 查询条件区域 -->
          <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 10px;">
            <el-select v-model="rankType" placeholder="排序方式" style="width: 150px;" clearable @change="handleQuery">
              <el-option
                v-for="(item, index) in rankTypeData"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-model="masterControlPlatform"
              placeholder="主控平台"
              clearable
              style="width: 110px;"
              @change="handleQuery"
            >
              <el-option
                v-for="item in masterControlPlatformData"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-select v-model="mainControlModel" placeholder="主控型号" style="width: 110px;" @change="handleQuery">
              <el-option
                v-for="item in mainControlModelData"
                :key="item.id"
                :label="`${item.label}`"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-select
              v-model="shape"
              placeholder="屏幕形状"
              clearable
              style="width: 110px;"
              @change="handleQuery"
            >
              <el-option
                v-for="item in shapeData"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-select
              v-model="dpiWh"
              placeholder="分辨率"
              clearable
              style="width: 110px;"
              @change="handleQuery"
            >
              <el-option
                v-for="item in dpiWhData"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-select
              v-model="dialType"
              placeholder="表盘类型"
              style="width: 100px;"
              size="small"
              clearable
              @change="handleQuery"
            >
              <el-option
                v-for="(item, index) in dialTypeData"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-select v-model="queryStatus" placeholder="状态" style="width: 100px;" size="small" clearable
                       @change="handleQuery" >
              <el-option v-for="(item, index) in statusData"
                         :key="index"
                         :label="item.label"
                         :value="item.value"
              ></el-option>
            </el-select>

            <el-select v-model="tagCodeStatus" placeholder="是否为动态" style="width: 115px;" size="small" clearable
                       @change="handleQuery" >
              <el-option v-for="(item, index) in tagCodeStatusData"
                         :key="index"
                         :label="item.label"
                         :value="item.value"
              ></el-option>
            </el-select>

            <el-input
              style="width: 100px;"
              size="small"
              v-number-check
              placeholder="表盘ID"
              v-model="dialId"
              clearable
            ></el-input>

            <el-input
              style="width: 150px;"
              size="small"
              placeholder="表盘名称"
              v-model="queryValue"
              clearable
            ></el-input>

            <el-button size="small" @click="handleQuery" icon="el-icon-search" type="primary">查询</el-button>
          </div>
        </el-form>

      </div>
    <el-table :data="list" border style="width: 100%" @selection-change="handleSelectionChange" :style="{'margin-top': `${padding_top}px`}">
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column type="index" fixed :index="sort" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="dialId" label="表盘ID" fixed="left" width="80" align="center"></el-table-column>
      <el-table-column label="预览图" width="144" align="center">
        <template v-slot="scope">
          <img style="width: 120px;" :src="scope.row.newPreviewUrl" alt="预览图">
        </template>
      </el-table-column>
      <el-table-column prop="dialNameZh" label="表盘名称(中文)" align="center"></el-table-column>
      <el-table-column prop="dpiWh" label="分辨率" align="center" ></el-table-column>
      <el-table-column prop="shape" label="屏幕形状" align="center" >
        <template v-slot="scope">
          <span>{{ getShapeText(scope.row.shape) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="masterControlPlatform" label="主控平台" align="center">
        <template v-slot="scope">
          <span>{{ getMasterControlPlatformText(scope.row.masterControlPlatform) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mainControlModel" label="主控型号" align="center" ></el-table-column>
      <el-table-column label="表盘大小（含缩略图）" align="center" >
        <template v-slot="scope">
          {{scope.row.dialSize}}kb
        </template>
      </el-table-column>
      <el-table-column label="表盘大小（不含缩略图）" align="center" >
        <template v-slot="scope">
          {{ scope.row.resSize }}kb
        </template>
      </el-table-column>
      <el-table-column label="表盘类型" align="center" >
        <template v-slot="scope">
          <span>{{ getDialTypeText(scope.row.dialTypeId) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" >
        <template v-slot="scope">
          <span>{{ getStatusText(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上传时间" ></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" ></el-table-column>
      <el-table-column v-if="is_show_button('built_in_save')" fixed="right" label="操作" width="100" align="center">
        <template v-slot="scope">
          <div>
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            {{ !scope.row.thumbnailUrl ? '导入缩略图' : '替换缩略图' }}
          </el-button>
          </div>
          <div v-if="scope.row.status !== '2' && is_show_button('built_in_save')">
            <el-button @click="changeStatus2(scope.row)" type="text" size="small">
              通过
            </el-button>
          </div>
          <div v-if="scope.row.status === '2' && is_show_button('built_in_save')">
            <el-button @click="changeStatus1(scope.row)" type="text" size="small">
              下架
            </el-button>
          </div>
          <div>
          <el-button @click="handleButtonClick(scope.row)" v-if="is_show_button('built_in_save')" type="text"
                     size="small">删除
          </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="导入表盘" :visible.sync="showImportData" width="1200px" @close="cancelImportDataDialog">
      <div style="margin-top: -20px;margin-bottom: 10px;">
        <el-select v-model="importData.resSize" placeholder="不含缩略图表盘大小" style="width: 165px; margin-right:8px"
                   size="small" clearable
                   @change="handleImportDataQuery">
          <el-option
            v-for="(item, index) in dialSizeData"
            :key="index"
            :label="`${item.label}`"
            :value="item.value"
          ></el-option>
        </el-select>
            <el-select v-model="importData.masterControlPlatform" placeholder="主控平台" clearable
                       style="width:120px;margin-right:6px" @change="handleImportDataQuery">
              <el-option
                  v-for="item in masterControlPlatformData"
                  :key="item.id"
                  :label="`${item.label}`"
                  :value="item.value"
              ></el-option>
            </el-select>
        <el-select v-model="importData.mainControlModel" placeholder="主控型号" style="width:120px;margin-right:6px" @change="handleImportDataQuery">
          <el-option
            v-for="item in mainControlModelData"
            :key="item.id"
            :label="`${item.label}`"
            :value="item.value"
          ></el-option>
        </el-select>
            <el-select v-model="importData.shape" placeholder="屏幕形状" clearable style="width:120px;margin-right:6px" @change="handleImportDataQuery">
              <el-option
                  v-for="item in shapeData"
                  :key="item.id"
                  :label="`${item.label}`"
                  :value="item.value"
              ></el-option>
            </el-select>
            <el-select v-model="importData.dpiWh" placeholder="分辨率" clearable style="width:120px;margin-right:6px" @change="handleImportDataQuery">
              <el-option
                  v-for="item in dpiWhData"
                  :key="item.id"
                  :label="`${item.label}`"
                  :value="item.value"
              ></el-option>
            </el-select>
            <el-select v-model="importData.dialType" placeholder="表盘类型" style="width: 110px; margin-right:8px" size="small" clearable
                       @change="handleImportDataQuery">
              <el-option
                  v-for="(item, index) in dialTypeData"
                  :key="index"
                  :label="`${item.label}`"
                  :value="item.value"
              ></el-option>
            </el-select>
            <el-input style="width:90px;margin-right:8px" size="small" v-number-check placeholder="表盘ID" v-model ="importData.dialId" clearable></el-input>
          <el-input style="width:140px;margin-right:8px" size="small" placeholder="表盘名称" v-model="importData.queryValue"
                    clearable></el-input>
          <el-button size="small" @click="handleImportDataQuery" icon="el-icon-search" type="primary">查询</el-button>
      </div>
      <el-table :data="importData.list" border style="width: 100%;" max-height="500" v-loading="importData.loading" @selection-change="selectImportIds">
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column type="index" fixed :index="sort" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="dialId" label="表盘ID" fixed="left" width="80" align="center"></el-table-column>
        <el-table-column label="预览图" width="144" align="center">
          <template v-slot="scope">
            <img style="width: 120px;" :src="scope.row.newPreviewUrl" alt="预览图">
          </template>
        </el-table-column>
        <el-table-column prop="dialNameZh" label="表盘名称(中文)" align="center"></el-table-column>
        <el-table-column prop="dpiWh" label="分辨率" align="center" ></el-table-column>
        <el-table-column prop="shape" label="屏幕形状" align="center" >
          <template v-slot="scope">
            <span>{{ getShapeText(scope.row.shape) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="masterControlPlatform" label="主控平台" align="center">
          <template v-slot="scope">
            <span>{{ getMasterControlPlatformText(scope.row.masterControlPlatform) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mainControlModel" label="主控型号" align="center" ></el-table-column>
        <el-table-column label="表盘大小（不含缩略图）" align="center">
          <template v-slot="scope">
            {{ (scope.row.resSize / 1024).toFixed(3) }} kb
          </template>
        </el-table-column>
        <el-table-column label="表盘类型" align="center" >
          <template v-slot="scope">
            <span>{{ getDialTypeText(scope.row.dialTypeId) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          style="position:relative;margin: 20px 0 10px;padding: 0;box-shadow: none;"
          @size-change="importSizeChange"
          @current-change="importCurrentChange"
          :current-page="importData.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="importData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="importData.total">
      </el-pagination>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelImportDataDialog">取 消</el-button>
        <el-button class="bt-color-tjd" v-if="is_show_button('built_in_save')" :loading="importData.submitLoading" type="primary" @click="saveDataApi">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="`${status < 1?'删除':(status === 1?'下架': '通过')}`"
               :visible.sync="changShow" center width="400px">
      <span style="display: inline-block; width: 100%; text-align: center; padding: 2px 0;"
            v-for="(item, index) in changeList" :key="index">
        {{ item.dialNameZh }}表盘 <br>
      </span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changShow = false">取 消</el-button>
        <el-button class="bt-color-tjd" type="primary" @click="saveStatusDataApi" :loading="batchLoading">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="form.thumbnailSize ?'替换缩略图':'导入缩略图'"  width="800px" :visible.sync="dialogFormVisible" center
               @close="closeDialog">
      <el-form :model="form" >
        <el-form-item style="margin-top: 50px;" label="预览图：" :label-width="formLabelWidth" center>
          <uploads-new style="margin-top: -40px" :url="thumbnailUrl" @chang_up="changeImg"></uploads-new>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" :disabled="submitLoadingThumbnail">取 消</el-button>
        <el-button class="bt-color-tjd" v-if="is_show_button('built_in_save')" type="primary"
                   @click="saveThumbnailDataApi" :loading="submitLoadingThumbnail">确 定
        </el-button>
      </div>
    </el-dialog>

    <Toast :dialogVisible="dialogVisible" @isDelete="deleteDataApi"></Toast>
  </div>
</template>

<script>
import { post } from '@/api/my_axios'
import { changSort } from '@/utils/aqi'
import UploadsNew from '@@/uploadsNew/UploadsNew.vue'

export default {
  name: '',
  components: { UploadsNew },
  data () {
    return {
      batchLoading: false,
      changShow: false,
      submitLoadingThumbnail: false, // 按钮loading
      submitLoading: false, // 按钮loading
      dialogFormVisible: false,
      dialogVisible: false,
      dialogShowS: false,
      showImportData: false,
      form: {
        id: '',
        thumbnailUrl: '',
        thumbnailSize: ''
      },
      importData: {
        loading: false,
        submitLoading: false,
        list: [],
        multipleSelection: [], // 多选
        pageNum: 1,
        pageSize: 10,
        total: 0,
        queryValue: '',
        dialId: '',
        masterControlPlatform: '',
        mainControlModel: '',
        shape: '',
        dpiWh: '',
        dialType: '',
        resSize: ''
      },
      list: [],
      multipleSelection: [], // 多选
      masterControlPlatformData: [], // 主控平台
      mainControlModelData: [], // 主控型号
      dpiWhData: [], // 分辨率
      shapeData: [], // 屏幕形状
      devIcFlashData: [], // flash存储空间
      changeList: [], // 多选
      thumbnailUrl: '',
      thumbnailSize: '',
      status: '',
      formLabelWidth: '140px',
      padding_top: 25,
      pageSize: 20,
      pageNum: 1,
      total: 0,
      id: '',
      queryValue: '',
      dialId: '',
      masterControlPlatform: '',
      mainControlModel: '',
      shape: '',
      dpiWh: '',
      dialType: '',
      rankType: '',
      queryStatus: '',
      tagCodeStatus: '',
      dialSize: '',
      resSize: '',
      statusData: [
        { value: '0', label: '待导入' },
        { value: '1', label: '待上架' },
        { value: '2', label: '通过' }
      ],
      dialTypeData: [
        { value: '112', label: '数字' },
        { value: '113', label: '模拟' }
      ],
      rankTypeData: [
        { value: 3, label: '上传时间倒序' },
        { value: 4, label: '上传时间正序' },
        { value: 11, label: '更新时间倒序' },
        { value: 12, label: '更新时间正序' },
        { value: 7, label: '文件大小（不含预览图）倒序' },
        { value: 8, label: '文件大小（不含预览图）正序' },
        { value: 9, label: '文件大小（含预览图）倒序' },
        { value: 10, label: '文件大小（含预览图）正序' }
      ],
      tagCodeStatusData: [
        { value: '0', label: '否' },
        { value: '1', label: '是' }
      ],
      dialSizeData: [
        { value: 40, label: '≤40 kb' },
        { value: 50, label: '≤50 kb' },
        { value: 100, label: '≤100 kb' },
        { value: 140, label: '≤140 kb' },
        { value: 200, label: '≤200 kb' },
        { value: 250, label: '≤250 kb' },
        { value: 500, label: '≤500 kb' },
        { value: 1024, label: '≤1M' }
      ]
    }
  },

  watch: {
    masterControlPlatform (val) {
      if (val) {
        this.getSysDictList(val)
      }
    },

    'importData.masterControlPlatform' (val) {
      if (val) {
        this.getSysDictList(val)
      }
    }
  },

  mounted () {
    this.getDictSortData()
    this.getBuiltInManagement()
  },

  methods: {
    // 排序 （序号）
    sort (index) {
      return changSort(index, this.pageNum, this.pageSize)
    },

    // 主控平台转化
    getMasterControlPlatformText (value) {
      if (value) {
        const devFuncArr = value.split(',')
        const newDevFunc = []
        devFuncArr.forEach(item => {
          this.masterControlPlatformData.forEach(ele => {
            if (ele.value === item) newDevFunc.push(ele.label)
          })
        })
        return newDevFunc.join(',')
      }
      return ''
    },

    // 类型转化
    getDialTypeText (value) {
      const dto = this.dialTypeData.find(v => v.value === value)
      return dto ? dto.label : ''
    },

    // 状态转化
    getStatusText (value) {
      const dto = this.statusData.find(v => v.value === value)
      return dto ? dto.label : ''
    },

    // 屏幕转化
    getShapeText (value) {
      const dto = this.shapeData.find(v => v.value === value)
      return dto ? dto.label : ''
    },

    // 通过
    changeStatus2 (row) {
      this.multipleSelection = [row]
      this.status = 2
      this.changShow = true
      this.changeList = this.multipleSelection
    },

    // 下架
    changeStatus1 (row) {
      this.multipleSelection = [row]
      this.status = 1
      this.changShow = true
      this.changeList = this.multipleSelection
    },

    changeStatus (status) {
      if (this.multipleSelection.length < 1) {
        this.$message.error('请先选择数据！')
        return
      }
      this.changShow = true
      this.changeList = this.multipleSelection
      this.status = status
    },

    cancelImportDataDialog () {
      this.showImportData = false
      Object.keys(this.form).forEach(key => {
        this.form[key] = ''
      })
      this.importData.list = []
      this.importData.multipleSelection = []
      this.importData.pageNum = 1
      this.importData.pageSize = 10
      this.importData.total = 0
    },

    // 新增
    saveImportDataForm () {
      this.showImportData = true
      this.getBuiltInImportList()
    },

    // 修改
    handleClick (data) {
      this.dialogFormVisible = true
      Object.keys(data).forEach(key => {
        this.form[key] = data[key]
      })
      this.id = this.form.id
      this.thumbnailUrl = this.form.thumbnailUrl
      this.thumbnailSize = this.form.thumbnailSize
    },

    // 关闭dialog框
    closeDialog () {
      this.submitLoadingThumbnail = false
      this.dialogFormVisible = false
      Object.keys(this.form).forEach(key => {
        this.form[key] = ''
      })
    },

    getBuiltInManagement () {
      this.list = []
      this.$store.dispatch('getBuiltInManagement', {
        kind: '1',
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        queryValue: this.queryValue,
        dialId: this.dialId,
        status: this.queryStatus,
        masterControlPlatform: this.masterControlPlatform,
        mainControlModel: this.mainControlModel,
        dpiWh: this.dpiWh,
        shape: this.shape,
        rankType: this.rankType || 11,
        tagCodeStatus: this.tagCodeStatus,
        dialTypeId: this.dialType,
        dialSize: this.dialSize,
        resSize: this.resSize
      }).then(res => {
        this.list = res.data
        this.total = res.total
      })
    },

    getBuiltInImportList () {
      this.importData.list = []
      this.importData.loading = true
      this.$store.dispatch('getBuiltInImportList', {
        kind: '1',
        pageSize: this.importData.pageSize,
        pageNum: this.importData.pageNum,
        queryValue: this.importData.queryValue,
        dialId: this.importData.dialId,
        status: this.importData.status,
        masterControlPlatform: this.importData.masterControlPlatform,
        mainControlModel: this.importData.mainControlModel,
        dpiWh: this.importData.dpiWh,
        shape: this.importData.shape,
        dialTypeId: this.importData.dialType,
        resSize: this.importData.resSize
      }).then(res => {
        this.importData.list = res.data
        this.importData.total = res.total
      }).finally(() => {
        this.importData.loading = false
      })
    },

    saveDataApi () {
      if (this.importData.multipleSelection.length < 1) {
        this.$message.error('请先选择数据！')
        return
      }
      const params = {
        dialIdList: [],
        kind: '1',
        saveType: 1
      }
      this.importData.multipleSelection.forEach(v => {
        params.dialIdList.push(v.dialId)
      })
      this.submitLoading = true
      post('/api/crm/sys/manage/builtIn/management/saveInfo', params).then(req => {
        if (req && req.code === 200) {
          this.$message({ message: req.msg, type: 'success' })
        } else {
          this.$message({ message: req.msg, type: 'error' })
        }
      }).finally(() => {
        this.cancelImportDataDialog()
        this.getBuiltInManagement()
      })
    },

    // 保存状态
    saveStatusDataApi () {
      const params = {
        idList: [],
        kind: '1',
        saveType: 2,
        status: ''
      }
      this.multipleSelection.forEach(v => {
        params.idList.push(v.id)
      })
      params.status = this.status
      this.batchLoading = true
      post('/api/crm/sys/manage/builtIn/management/saveInfo', params).then(req => {
        if (req && req.code === 200) {
          this.$message({ message: '成功！', type: 'success' })
        } else {
          this.$message({ message: '失败！', type: 'error' })
        }
      }).finally(() => {
        this.batchLoading = false
        this.changShow = false
        this.status = ''
        this.getBuiltInManagement()
      })
    },

    saveThumbnailDataApi () {
      if (!this.thumbnailUrl) {
        this.$message.error('请先选择数据！')
        return
      }
      const params = {
        id: '',
        thumbnailUrl: '',
        thumbnailSize: '',
        kind: '1',
        status: '1',
        saveType: 3
      }
      params.id = this.id
      params.thumbnailUrl = this.thumbnailUrl
      params.thumbnailSize = this.thumbnailSize
      this.submitLoadingThumbnail = true
      post('/api/crm/sys/manage/builtIn/management/saveInfo', params).then(req => {
        if (req && req.code === 200) {
          this.$message({ message: '导入成功', type: 'success' })
        } else {
          this.$message({ message: '导入失败', type: 'error' })
        }
      }).finally(() => {
        this.closeDialog()
        this.getBuiltInManagement()
      })
    },

    deleteDataApi (type) {
      if (type === 'ok') {
        const ids = Array.isArray(this.id) ? this.id : [this.id]
        post('/api/crm/sys/manage/builtIn/management/deleteByIds', ids
        ).then(req => {
          if (req && req.code === 200) {
            this.$message({ message: req.msg, type: 'success' })
            this.getBuiltInManagement()
          }
        })
      }
      this.dialogVisible = false
    },

    changeImg ({ file, key }) {
      this.thumbnailUrl = file.src
      this.thumbnailSize = file.size
      // 设置上传状态
      this.submitLoadingThumbnail = true
      // 文件目录和文件名
      const directory = 'crm/builtIn/thumbnail/dial/'
      // 获取时间戳
      const timestamp = Date.now() // 或者 new Date().getTime()

      // 生成新文件名（格式：key_时间戳_原文件名）
      const fileName = `${timestamp}_${file.name}`
      // 设置上传表单参数
      this.uploadForm = {
        fileSrc: file.src,
        directory,
        fileName
      }

      // 调用上传接口
      post('/api/cms/file/oss/upload/commonFileNew', this.uploadForm).then((res) => {
        if (res && res.code === 200) {
          this.form.thumbnailUrl = res.data.url
          this.thumbnailUrl = res.data.url
        }
      }).finally(() => {
        this.submitLoadingThumbnail = false
      })
    },

    // 根据主控平台获取对应主控型号
    getSysDictList (value) {
      this.$store.dispatch('getSysDictItemList', value).then(res => {
        this.mainControlModelData = res
      })
    },

    // 数据字典配置分类项获取
    getDictSortData () {
      // 分辨率
      this.$store.dispatch('getSysDictItemList', 'devScrDpi').then(res => {
        const shieldDp = ['320x380', '410x502', '410x492', '172x320', '无显示屏']
        const newArr = []
        res.forEach(item => {
          if (!shieldDp.includes(item.value)) newArr.push(item)
        })
        this.dpiWhData = newArr
      })

      // 主控平台系列
      this.$store.dispatch('getSysDictItemList', 'devIcMseries').then(res => {
        this.masterControlPlatformData = res
      })

      // 屏幕形状
      this.$store.dispatch('getSysDictItemList', 'devScrShape').then(res => {
        this.shapeData = res
      })

      // flash存储空间
      this.$store.dispatch('getSysDictItemList', 'devIcFlash').then(res => {
        this.devIcFlashData = res
      })
    },

    selectImportIds (val) {
      this.importData.multipleSelection = val
    },

    handleImportDataQuery () {
      this.importData.pageNum = 1
      this.getBuiltInImportList()
    },

    importSizeChange (size) {
      this.importData.pageSize = size
      this.getBuiltInImportList()
    },

    importCurrentChange (num) {
      this.importData.pageNum = num
      this.getBuiltInImportList()
    },

    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    handleQuery () {
      this.pageNum = 1
      this.getBuiltInManagement()
    },

    handleSizeChange (val) {
      this.pageSize = val
      this.getBuiltInManagement()
    },

    handleCurrentChange (val) {
      this.pageNum = val
      this.getBuiltInManagement()
    },

    handleButtonClick (data) {
      this.id = data.id
      this.dialogVisible = true
    },

    is_show_button (name) {
      let show = false
      this.$store.state.module1.menu_list.forEach(v => {
        // eslint-disable-next-line eqeqeq
        if (v.path === name) {
          show = true
        }
      })
      return show
    }
  }
}
</script>

<style lang='scss'>
  .page_format {
    padding: 56px 20px 140px 20px;
  }
  .search-form{
    margin-top: 10px;
  }

  .icon-image {
    width: auto;
    height: auto;
    object-fit: cover;
  }

  .uniform-button {
    width: 120px; /* 统一宽度 */
    text-align: center; /* 文本居中 */
    margin-left: 10px; /* 左侧间距 */
  }

  .btnBox{
    display: flex;
    align-items: center;
    margin-top: 8px;
  }
</style>
